<!--
 * @页面名称:查看轨迹弹框
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <modal v-model:visible="config.visible" :title="config.title" width="80vw" height="500px" @ok="ok">
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in trailList"
        placement="top"
        :timestamp="item.Log_Time"
        :key="index"
        :type="item.Log_IsHighRisk === true ? 'danger' : 'primary'"
      >
        <el-card>
          <h4>操作类型: {{ item.Log_ChangMark }}</h4>
          <p>操作人: {{ formatter(item.U_ID) }}</p>
          <div class="content">
            <span style="width: 80px">操作内容:</span>
            <codemirror v-model:value="item.Log_Content" :tabSize="2" :options="editorOption"> </codemirror>
          </div>
          <!-- <p v-show="item.Log_Type !== 'Add'">操作内容: {{ item.Log_Content }}</p>
          <p>ip地址: {{ item.Log_IP }}</p> -->
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </modal>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useDynamicStore } from "@/stores/modules/dynamic";
import vkbeautify from "vkbeautify";
// json和xml预览插件
import Codemirror from "codemirror-editor-vue3";
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
import ACrypto from "@/utils/crypto";
import useCurrentInstance from "@/utils/useCurrentInstance";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {
        visible: false,
        title: "查看轨迹",
        data: {}
      };
    }
  }
});
const { proxy } = useCurrentInstance();
// pinia数据
const userStore = useUserStore();
const dynamicStore = useDynamicStore();
// 轨迹数据
const trailList = ref<any[]>([]);
// json显示配置
const editorOption = reactive({
  // 代码编辑框配置
  autorefresh: true,
  tabSize: 4,
  mode: "text/javascript",
  // theme: "ayu-mirage",
  line: true,
  viewportMargin: Infinity, //处理高度自适应时搭配使用
  highlightDifferences: true,
  autofocus: false,
  indentUnit: 2,
  smartIndent: true,
  readOnly: true, // 只读
  showCursorWhenSelecting: true,
  firstLineNumber: 1
});
// 弹出框显示
const show = () => {
  getData();
};
// 获取数据
const getData = () => {
  proxy.$vueAxios.get("MasterBaseLog/GetLogTrack", { logRecordID: props.config.data.Record_ID }).then((res: any) => {
    trailList.value = res.List;
    trailList.value.forEach((item: any) => {
      // 将字符串转换为 JSON 对象
      // const json_content = JSON.parse(item.Log_Content);
      // // 修改 "Title" 的值
      // json_content.Title = ACrypto.getSS(json_content.Title);
      // // 将修改后的 JSON 对象转换回字符串
      // let modified_content = JSON.stringify(json_content);
      // // 格式化 JSON 字符串
      // item.Log_Content = vkbeautify.json(modified_content);
      //item.Log_Content = vkbeautify.json(item.Log_Content);
      // if (item.Log_Type === "Add") {
      //   item.Log_Content = vkbeautify.json(item.Log_Content);
      // } else if (item.Log_Type === "edit") {
      //   const oldObj = dynamicStore.oldModalFormData;
      //   // const newObj = JSON.parse(item.Log_Content);
      //   // const difference = Object.keys(oldObj).filter(k => oldObj[k] !== newObj[k]);
      //   // console.log(difference, oldObj);
      // }
    });

    props.config.visible = true;
  });
};
// 点击确认
const ok = () => {
  props.config.visible = false;
};
// 格式化操作人
const formatter = (id: string) => {
  // console.log(userStore.userInfo);
  return userStore.userInfo.U_CName;
};
defineExpose({
  show
});
</script>

<style scoped lang="scss">
.el-dialog__body {
  max-height: 500px;
  overflow: auto;
}
</style>
<style lang="scss">
.content {
  display: flex;
  height: 150px;
  .CodeMirror {
    height: auto !important;
  }
}
</style>
